<template>
	<view @touchmove.stop.prevent="moveHandle" class="bg" name="loading">
		<view :class="'loading_bg loading_bg' + load.loadType" v-if="showBox && load.loadType > -1">
			<view :class="load.loadType < 3 ? 'loading_flex monster_big' : 'loading_flex monster_small'" v-if="load.loadAnimation == 'monster' || load.loadAnimation == undefined">
				<view class="monster">
					<div class="eye">
						<div class="eyeball"></div>
					</div>
					<div class="mouth"></div>
				</view>

				<view class="monster blue">
					<div class="eye">
						<div class="eyeball"></div>
					</div>
					<div class="mouth"></div>
				</view>

				<view class="monster green">
					<div class="eye">
						<div class="eyeball"></div>
					</div>
					<div class="mouth"></div>
				</view>
			</view>


			<view class="loading_flex">
				<view class="rabbit" v-if="load.loadAnimation == 'rabbit'"></view>
			</view>
		</view>

		<view class="loading_prompt1" v-if="load.loadPrompt && list.length == 0 && !showBox && !loadMore">
			<view class="">{{load.loadText}}</view>
		</view>
		<view class="loading_prompt2" v-if="load.loadPrompt && list.length > 0 && !showBox && loadMore">
			<view></view>
			<view>上拉加载更多</view>
		</view>
		<view class="loading_prompt2" v-if="load.loadPrompt && list.length > 0 && !showBox && !loadMore">
			<view></view>
			<view>没有更多了</view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				time: 0,
				showBox: false,
				load: {
					loadType: -1, //0全屏 1覆盖数据 2部分 3底部加载
					loading: true, //是否使用该组件
					loadAnimation: "monster", //monster  rabbit
					loadHideTime: 1000, //隐藏时间
					loadPrompt: true, //是否显示文本
					loadImg: "", //空值提示图片
					loadText: "没有更多了~" //空值提示文字
				},
				list: [],
				loadMore: true //是否可以加载更多
			}
		},
		methods: {
			initLoading(res) {
				let that = this;
				return new Promise((resolve, reject) => {
					if (res.loadType > -1) {
						this.loadMore = true;
						this.showBox = true;
						this.time = 0;
						for (let key in res) {
							this.load[key] = res[key]
						}
						this.list = [];
						if (that.timer != undefined) {
							clearInterval(that.timer);
						}
						if (that.timers != undefined) {
							clearTimeout(that.timers);
						}
						that.timer = setInterval(function() {
							that.time += 50;
						}, 50)
						that.timers = setTimeout(function() {
							clearInterval(that.timer);
							that.showBox = false;
						}, 10000)
						resolve(true)
					} else {
						that.showBox = false;
						uni.showLoading({
							title: "加载中"
						})
						resolve(true)
					}
				})
			},
			getLoadingData(res) {
				let that = this;
				return new Promise((resolve, reject) => {
					if (that.load.loadType > -1) {
						if (that.timer != undefined) clearInterval(that.timer);
						if (that.timers != undefined) clearTimeout(that.timers);
						if (Array.isArray(res.oldData) && Array.isArray(res.newData)) {
							this.list.push.apply(this.list, res.oldData);
							this.list.push.apply(this.list, res.newData);
							that.timer = setInterval(function() {
								if (that.time >= that.load.loadHideTime) {
									clearInterval(that.timer);
									if (res.newData.length < 10) {
										that.loadMore = false;
									}
									that.showBox = false;
									resolve({
										list: that.list,
										loading: that.loadMore
									})
								}
								that.time += 500;
							}, 50)
						} else {
							that.timer = setInterval(function() {
								if (that.time >= that.load.loadHideTime) {
									clearInterval(that.timer);
									setTimeout(function() {
										that.showBox = false;
									}, 50)
									resolve(true)
								}
								that.time += 50;
							}, 50)
						}
					} else {
						if (that.timer != undefined) clearInterval(that.timer);
						if (that.timers != undefined) clearTimeout(that.timers);
						if (Array.isArray(res.oldData) && Array.isArray(res.newData)) {
							this.list.push.apply(this.list, res.oldData);
							this.list.push.apply(this.list, res.newData);
							if (res.newData.length < 10) {
								that.loadMore = false;
							}
							resolve({
								list: that.list,
								loading: that.loadMore
							})
							uni.hideLoading();
							that.showBox = false;
						} else {
							resolve(true)
						}
					}
				})
			},
			moveHandle() {
				console.log("gun")
			}
		}
	}
</script>

<style>
	.loading_bg0 {
		width: 100%;
		position: fixed;
		height: 100vh;
		background: #F7F7FA;
		top: 0;
		left: 0;
		z-index: 999;
	}

	.loading_bg1 {
		width: 100%;
		position: fixed;
		height: 100vh;
		background: #F7F7FA;
		top: 0;
		left: 0;
		z-index: 100;
	}

	.loading_bg2 {
		width: 100%;
		height: 300upx;
	}

	.loading_bg3 {
		width: 100%;
		height: 100upx;
	}

	.loading_flex {
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
	}

	.loading_prompt1 {
		width: 100%;
		margin-top: 50%;
		transform: translateY(-50%);
		font-size: 14px;
		color: #666;
		text-align: center;
	}

	.loading_prompt1 image {
		width: 150px;
		height: 170px;
		margin: 0 auto;
	}

	.loading_prompt1 view {
		margin-top: 10px;
	}

	.loading_prompt2 {
		position: relative;
		height: 50px;
		width: 100%;
		font-size: 14px;
		color: #666;
	}

	.loading_prompt2 view:nth-child(1) {
		position: absolute;
		top: 0;
		left: 50%;
		width: 350upx;
		height: 24px;
		border-bottom: 1upx solid #999999;
		transform: translateX(-50%);
	}

	.loading_prompt2 view:nth-child(2) {
		position: absolute;
		top: 0;
		left: 50%;
		width: 200upx;
		text-align: center;
		line-height: 50px;
		background: #F7F7F7;
		transform: translateX(-50%);
	}

	.monster_big .monster {
		width: 40px;
		height: 40px;
		border-radius: 7px;
	}

	.monster_small .monster {
		width: 20px;
		height: 20px;
		border-radius: 3px;
	}

	.monster {
		background-color: #E55A54;
		position: relative;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		cursor: pointer;
		margin: 10upx;
		box-shadow: 0upx 10upx 20upx rgba(0, 0, 0, 0.2);
		position: relative;
		animation: jumping 0.8s infinite alternate;
	}

	.monster .eye {
		width: 40%;
		height: 40%;
		border-radius: 50%;
		background-color: #fff;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.monster .eyeball {
		width: 50%;
		height: 50%;
		border-radius: 50%;
		background-color: #0C4475;
	}

	.monster .mouth {
		width: 40%;
		height: 12upx;
		border-radius: 12upx;
		background-color: white;
		margin-top: 15%;
	}

	.monster_small .monster .mouth {
		width: 60%;
		height: 8upx;
		border-radius: 4upx;
	}

	.monster:before,
	.monster:after {
		content: "";
		display: block;
		width: 20%;
		height: 10upx;
		position: absolute;
		left: 50%;
		top: -10upx;
		background-color: #0C4475;
		border-radius: 10upx;
	}

	.monster_small .monster:before,
	.monster_small .monster:after {
		width: 0;
		height: 0;
	}

	.monster.blue:before,
	.monster.blue:after {
		background: #0CD475;
	}

	.monster.green:before,
	.monster.green:after {
		background: #E55A54;
	}

	.monster:before {
		transform: translateX(-70%) rotate(45deg);
	}

	.monster:after {
		transform: translateX(-30%) rotate(-45deg);
	}

	.monster.blue {
		background-color: #0C4475;
		animation-delay: 0.5s;
	}

	.monster.green {
		background-color: #0CD475;
		animation-delay: 1s;
	}

	@keyframes jumping {
		50% {
			top: 0;
			box-shadow: 0upx 10upx 20upx rgba(0, 0, 0, 0.2);
		}

		100% {
			top: -50upx;
			box-shadow: 0upx 120upx 50upx rgba(0, 0, 0, 0.2);
		}
	}

	@keyframes eyemove {

		0%,
		10% {
			transform: translate(50%);
		}

		90%,
		100% {
			transform: translate(-50%);
		}
	}

	.monster .eyeball {
		animation: eyemove 1.6s infinite alternate;
	}

	.monster.blue .eyeball {
		background-color: #0CD475;
	}

	.monster.green .eyeball {
		background-color: #E55A54;
	}

	.rabbit {
		width: 75px;
		height: 45px;
		color: whitesmoke;
		background: currentColor;
		border-radius: 70% 90% 60% 50%;
		position: relative;
	}

	.rabbit {
		background: radial-gradient(circle at 63px 21px, #333 2.3px, transparent 2.3px), currentColor;
	}

	.rabbit::before {
		content: '';
		position: absolute;
		width: 11.2px;
		height: 30px;
		background: currentColor;
		border-radius: 50% 100% 0 0;
		transform: rotate(-30deg);
		top: -15px;
		right: 15px;
	}

	.rabbit::before {
		border: 1.5px solid;
		border-color: gainsboro transparent transparent gainsboro;
		box-shadow: -7.5px 0 0 -1.5px;
	}

	.rabbit::after {
		content: '';
		position: absolute;
		width: 15px;
		height: 15px;
		background-color: currentColor;
		border-radius: 50%;
		left: -4.5px;
		top: 7.5px;
	}

	.rabbit::after {
		box-shadow: 7.5px 15px 0, 60px 15px 0 -3px, 60px 15px 0 -3px
	}

	.rabbit {
		box-shadow: -3px 15px 0 -11.2px #333;
	}

	.rabbit {
		animation: hop 1.5s linear infinite;
	}

	@keyframes hop {
		20% {
			transform: rotate(-10deg) translate(15px, -30px);
			box-shadow: -3px 15px 0 -15px #333;
		}

		40% {
			transform: rotate(10deg) translate(45px, -60px);
			box-shadow: -3px 49px 0 -16.5px #333;
		}

		60%,
		75% {
			transform: rotate(0deg) translate(60px, 0);
			box-shadow: -3px 15px 0 -11.2px #333;
		}
	}

	.rabbit::after {
		animation: kick 1.5s infinite linear;
	}

	@keyframes kick {
		40% {
			box-shadow: 7.5px 30px 0, 63px 26.2px 0 -3px, 61px 29px 0 -1.5px;
		}
	}
</style>
